<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:h="jakarta.faces.html" xmlns:f="jakarta.faces.core" xmlns:ui="jakarta.faces.facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui"
    xmlns:sec="https://joinfaces.org/security"
          template="/WEB-INF/template.xhtml">
    <!--template="/template.xhtml">-->
    <ui:define name="implementation">
        <script>
            function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
            function expendTreeNodeBySelectedRowKey(rowkey){
                let rowKeys=[];
                let idx;
                let separator='_';
                rowKeys.push(rowkey);
                idx=rowkey.indexOf(separator);
                
                while(idx !== -1 ){
                    let sub=rowkey.substring(0,idx);
                    rowKeys.push(sub);
                    idx=rowkey.indexOf(separator,idx+1);
                    console.log("index value is :" +idx);
                }
                nodes = PF("areaTree").findNodes(rowKeys);
                nodes.forEach(n => {
//                    PF("areaTree").selectNode(n);
                    wait(500).then(() =>  PF("areaTree").expandNode(n));
//            PF("areaTree").expandNode(n);
        });
            }
            </script>
        <p:toolbar>
            <p:toolbarGroup align="left">
                      <p:commandButton id="delete-multiple-button" value="#{sms['button.delMultiple']}"
                                         icon="pi pi-trash" actionListener="#{sysAreaMBean.delSingle}"
                                         styleClass="ui-button-danger ml-2 col" update="@form">
                            <p:confirm header="#{sms['confirm.title']}" message="#{sms['confirm.message']}"
                                       icon="pi pi-exclamation-triangle"/>
                        </p:commandButton>
                           <p:commandButton id="newObj" value="#{sms['button.new']}" icon="pi pi-plus"
                                         styleClass="ml-2 col" action="#{sysAreaMBean.newOpt('sysAreaForm')}">
                            <p:ajax event="dialogReturn"     update="@form"/>
                        </p:commandButton>
                    <p:commandButton id="editObj" value="#{sms['button.edit']}" icon="pi pi-file-edit"
                                     styleClass="ml-2 col" action="#{sysAreaMBean.editOpt('sysAreaForm')}" >
                            <p:ajax event="dialogReturn"     update="@form"/>
                    </p:commandButton>
                    <p:button value="refresh" id="refreshBtnId" onclick="expendTreeNodeBySelectedRowKey('${sysAreaMBean.selectedNodeRowKey}')"/>
                    
            </p:toolbarGroup>
            <p:toolbarGroup align="right">
                
                          <p:commandButton id="saveChildrenSort" value="#{sms['button.edit']}" icon="pi pi-file-edit"
                                           styleClass="ml-2 col" action="#{sysAreaMBean.saveSortChange}" >
                            <!--<p:ajax event="dialogReturn"     update="@form"/>-->
                    </p:commandButton>
            </p:toolbarGroup>
            </p:toolbar>
    <p:splitter layout="horizontal"  style="height:800px">
        <p:splitterPanel  styleClass="flex align-items-top justify-content-top" size="10"  minSize="5">
            <p:scrollPanel mode="native">
                <p:tree id="areaTreeId" widgetVar="areaTree" value="#{sysAreaMBean.root}" var="node" dynamic="true"  animate="true" 
                selectionMode="single"  onDrop="#{sysAreaMBean.onDrop}"                selection="#{sysAreaMBean.selectedNode}"  highlight="true"  draggable="true" droppable="true" >
<p:ajax event="select" update="messages,treeTableId,refreshBtnId" listener="#{sysAreaMBean.onNodeSelect}" />
<p:ajax event="dragdrop" listener="#{sysAreaMBean.onDragDrop}" update="@form"/>
            <p:treeNode  expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
                <h:outputText value="#{node.name}"/>
            </p:treeNode>
        </p:tree>
                        </p:scrollPanel>
        </p:splitterPanel>
        <p:splitterPanel styleClass="flex align-items-top justify-content-top" size="80"  minSize="20">

       <p:scrollPanel mode="native">
            <p:dataTable id="treeTableId" widgetVar="treeTable"  value="#{sysAreaMBean.childrens}" var="node" draggableRows="true"

                     >
       
                <!--<p:ajax event="rowReorder" listener="{sysAreaMBean.onRowReorder}" update="treeTableId,areaTreeId" />-->
                      <!--paginator="true" rows="10"-->
                     <!--selectionMode="single"                     selection="{sysAreaMBean.selectedNode}"-->
                     <!--selectionMode="checkbox"                     selection="{sysAreaMBean.selectedNodes2}"-->
                     <p:column headerText="Name"  resizable="true" width="100"  sortBy="#{node.name}">
                <h:outputText value="#{node.name}"/>
            </p:column>
            <p:column headerText="parent"  sortBy="#{node.parent.name}">
                <h:outputText value="#{node.parent.name}"/>
            </p:column>
            <p:column headerText="pid"  sortBy="#{node.pid}">
                <h:outputText value="#{node.pid}"/>
            </p:column>
            <p:column headerText="level"   sortBy="#{node.level}">
                 
                <h:outputText value="#{node.level}"/>
            </p:column>
            <p:column headerText="sort"  sortBy="#{node.sort}">
                <h:outputText value="#{node.sort}"/>
            </p:column>
            <p:column headerText="provinceCode"  sortBy="#{node.provinceCode}">
                <h:outputText value="#{node.provinceCode}"/>
            </p:column>
         
            <p:column headerText="cityCode"  sortBy="#{node.cityCode}">
                <h:outputText value="#{node.cityCode}"/>
            </p:column>
            <p:column headerText="areaCode"  sortBy="#{node.areaCode}">
                <h:outputText value="#{node.areaCode}"/>
            </p:column>
            <p:column headerText="streetCode"  sortBy="#{node.streetCode}">
                <h:outputText value="#{node.streetCode}"/>
            </p:column>
            <p:column headerText="committeeCode"  sortBy="#{node.committeeCode}">
                <h:outputText value="#{node.committeeCode}"/>
            </p:column>
            <p:column headerText="committeeType"  sortBy="#{node.committeeType}">
                <h:outputText value="#{node.committeeType}"/>
            </p:column>
            <p:column headerText="hasChildren"  sortBy="#{node.hasChildren}">
                <h:outputText value="#{node.hasChildren}"/>
            </p:column>
         
        </p:dataTable>
           </p:scrollPanel>
        </p:splitterPanel>
    </p:splitter>
    </ui:define>
    
</ui:composition>